Error accessing webkitSpeechRecognition() in my pwa application

Question

Created Mar ’24

Replies 0

Boosts 0

Participants 1

I use the Vue.js 3 language, together with Typescript, I created a pwa application and I want to create a voice button, but when I use this button created in my safari it works, when I add my application to the IOS home screen, it no longer works, I tested it with different versions of Ios.

an example of my code:

<template>
 <div class="app-container">
  <span
   @touchstart="startRecording"
   @touchend="stopRecording"
    class="no-select microphone-button"
   >
    <el-icon :style="{ transform: isActive ? 'scale(2.3)' : 'scale(1.5)' }" id="microphone-button-margin">
    <Microphone />
    <span v-if="isActive" class="recording-indicator" />
    </el-icon>
   </span>
   <p>Texto Reconhecido: {{ recognizedText }}</p>
  </div>
</template>

<script setup lang="ts">
 const recognizedText=ref('')
 let recognition: any=null
 const isActive=ref(false)

onMounted(() => {
  recognition = new (window as any).webkitSpeechRecognition()
})

const startRecording = () => {
  isActive.value = true
  recognition.lang = 'pt-BR'
  recognition.continuous = false
  ElMessage.error('Start')
  recognition.onresult = (event: { results: { transcript: any }[][] }) => {
    ElMessage.success(event.results[0][0].transcript)
    const transcript = event.results[0][0].transcript
    recognizedText.value = transcript
  }
  recognition.start()
}
const stopRecording = () => {
  isActive.value = false
  ElMessage.error('Stop')
  if (recognition) {
    recognition.stop()
  }
}
</script>

link code: [https://element-plus.run/#eyJzcmMvQXBwLnZ1ZSI6IjxzY3JpcHQgc2V0dXAgbGFuZz1cInRzXCI+XG5pbXBvcnQgeyByZWYsIHZlcnNpb24gYXMgdnVlVmVyc2lvbiwgb25Nb3VudGVkIH0gZnJvbSAndnVlJ1xuaW1wb3J0IHsgdmVyc2lvbiBhcyBlcFZlcnNpb24sIEVsTWVzc2FnZSB9IGZyb20gJ2VsZW1lbnQtcGx1cydcbmltcG9ydCB7IE1pY3JvcGhvbmUgfSBmcm9tICdAZWxlbWVudC1wbHVzL2ljb25zLXZ1ZSdcblxuY29uc3QgcmVjb2duaXplZFRleHQ9cmVmKCcnKVxubGV0IHJlY29nbml0aW9uOiBhbnk9bnVsbFxuY29uc3QgaXNBY3RpdmU9cmVmKGZhbHNlKVxuXG5vbk1vdW50ZWQoKCkgPT4ge1xuICByZWNvZ25pdGlvbiA9IG5ldyAod2luZG93IGFzIGFueSkud2Via2l0U3BlZWNoUmVjb2duaXRpb24oKVxufSlcblxuY29uc3Qgc3RhcnRSZWNvcmRpbmcgPSAoKSA9PiB7XG4gaXNBY3RpdmUudmFsdWUgPSB0cnVlXG4gIHJlY29nbml0aW9uLmxhbmcgPSAncHQtQlInXG4gIHJlY29nbml0aW9uLmNvbnRpbnVvdXMgPSBmYWxzZVxuICBFbE1lc3NhZ2UuZXJyb3IoJ1N0YXJ0JylcbiAgcmVjb2duaXRpb24ub25yZXN1bHQgPSAoZXZlbnQ6IHsgcmVzdWx0czogeyB0cmFuc2NyaXB0OiBhbnkgfVtdW10gfSkgPT4ge1xuICAgIEVsTWVzc2FnZS5zdWNjZXNzKGV2ZW50LnJlc3VsdHNbMF1***0udHJhbnNjcmlwdClcbiAgICBjb25zdCB0cmFuc2NyaXB0ID0gZXZlbnQucmVzdWx0c1swXVswXS50cmFuc2NyaXB0XG4gICAgcmVjb2duaXplZFRleHQudmFsdWUgPSB0cmFuc2NyaXB0XG4gIH1cbiAgcmVjb2duaXRpb24uc3RhcnQoKVxufVxuY29uc3Qgc3RvcFJlY29yZGluZyA9ICgpID0+IHtcbiAgaXNBY3RpdmUudmFsdWUgPSBmYWxzZVxuICBFbE1lc3NhZ2UuZXJyb3IoJ1N0b3AnKVxuICBpZiAocmVjb2duaXRpb24pIHtcbiAgICByZWNvZ25pdGlvbi5zdG9wKClcbiAgfVxufVxuXG48L3NjcmlwdD5cblxuPHRlbXBsYXRlPlxuICA8ZGl2IGNsYXNzPVwiYXBwLWNvbnRhaW5lclwiPlxuICAgIDxlbC1jYXJkPlxuICAgICAgPGVsLXJvdyA6Z3V0dGVyPVwiNVwiPlxuICAgICAgICA8ZWwtY29sIDp4cz1cIjI0XCIgOnNtPVwiMjRcIiA6bWQ9XCIyNFwiIDpsZz1cIjI0XCIgOnhsPVwiMjRcIiBzdHlsZT1cIm1hcmdpbi10b3A6IDE1cHhcIj5cbiAgICAgICAgICA8c3BhblxuICAgICAgICAgICAgQHRvdWNoc3RhcnQ9XCJzdGFydFJlY29yZGluZ1wiXG4gICAgICAgICAgICBAdG91Y2hlbmQ9XCJzdG9wUmVjb3JkaW5nXCJcbiAgICAgICAgICAgIGNsYXNzPVwibm8tc2VsZWN0IG1pY3JvcGhvbmUtYnV0dG9uXCJcbiAgICAgICAgICA+XG4gICAgICAgICAgICA8ZWwtaWNvbiA6c3R5bGU9XCJ7IHRyYW5zZm9ybTogaXNBY3RpdmUgPyAnc2NhbGUoMi4zKScgOiAnc2NhbGUoMS41KScgfVwiIGlkPVwibWljcm9waG9uZS1idXR0b24tbWFyZ2luXCI+XG4gICAgICAgICAgICAgIDxNaWNyb3Bob25lIC8+XG4gICAgICAgICAgICAgIDxzcGFuIHYtaWY9XCJpc0FjdGl2ZVwiIGNsYXNzPVwicmVjb3JkaW5nLWluZGljYXRvclwiIC8+XG4gICAgICAgICAgICA8L2VsLWljb24+XG4gICAgICAgICAgPC9zcGFuPlxuICAgICAgICAgIDxwPlRleHRvIFJlY29uaGVjaWRvOiB7eyByZWNvZ25pemVkVGV4dCB9fTwvcD5cbiAgICAgICAgPC9lbC1jb2w+XG4gICAgICA8L2VsLXJvdz5cbiAgICA8L2VsLWNhcmQ+XG4gIDwvZGl2PlxuPC90ZW1wbGF0ZT5cblxuPHN0eWxlIHNldHVwPlxuLm5vLXNlbGVjdCB7XG4gIC13ZWJraXQtdXNlci1zZWxlY3Q6IG5vbmU7IC8qIFNhZmFyaSAqL1xuICAtbW96LXVzZXItc2VsZWN0OiBub25lOyAgLyogRmlyZWZveCAqL1xuICAtbXMtdXNlci1zZWxlY3Q6IG5vbmU7ICAvKiBJRSAxMCsgICovXG4gICB1c2VyLXNlbGVjdDogbm9uZTsgICAvKiBTdGFuZGFyZCAqL1xufVxuLm1pY3JvcGhvbmUtYnV0dG9uIHtcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGRpc3BsYXk6IGJsb2NrO1xuICBoZWlnaHQ6IDMwcHg7XG4gIHdpZHRoOiA0MHB4O1xufVxuLnJlY29yZGluZy1pbmRpY2F0b3Ige1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHRvcDogLTVweDtcbiAgcmlnaHQ6IDEycHg7XG4gIHdpZHRoOiA3cHg7XG4gIGhlaWdodDogN3B4O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiByZWQ7XG4gIGJvcmRlci1yYWRpdXM6IDUwJVxufVxuPC9zdHlsZT5cbiIsImltcG9ydC1tYXAuanNvbiI6IntcbiAgXCJpbXBvcnRzXCI6IHt9XG59IiwidHNjb25maWcuanNvbiI6IntcbiAgXCJjb21waWxlck9wdGlvbnNcIjoge1xuICAgIFwidGFyZ2V0XCI6IFwiRVNOZXh0XCIsXG4gICAgXCJqc3hcIjogXCJwcmVzZXJ2ZVwiLFxuICAgIFwibW9kdWxlXCI6IFwiRVNOZXh0XCIsXG4gICAgXCJtb2R1bGVSZXNvbHV0aW9uXCI6IFwiQnVuZGxlclwiLFxuICAgIFwidHlwZXNcIjogW1wiZWxlbWVudC1wbHVzL2dsb2JhbC5kLnRzXCJdLFxuICAgIFwiYWxsb3dJbXBvcnRpbmdUc0V4dGVuc2lvbnNcIjogdHJ1ZSxcbiAgICBcImFsbG93SnNcIjogdHJ1ZSxcbiAgICBcImNoZWNrSnNcIjogdHJ1ZVxuICB9LFxuICBcInZ1ZUNvbXBpbGVyT3B0aW9uc1wiOiB7XG4gICAgXCJ0YXJnZXRcIjogMy4zXG4gIH1cbn1cbiIsIl9vIjp7fX0=)

Can anyone help me in this case? I don't know what I could be doing wrong and I also did a lot of research and didn't see anything to help me.

Boost